<template>
  <nav
    id="nav"
    class="navbar fixed-top navbar-expand-lg navbar-light navbar-transparent"
  >
    <router-link
      to="/"
      class="navbar-brand text-white font-weight-bold"
      style="font-size: 50px"
      >Gas</router-link
    >
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <router-link to="/" class="nav-link text-white font-weight-bold">
            主页
            <span class="sr-only">(current)</span>
          </router-link>
        </li>
        <li class="nav-item">
          <router-link
            :to="{ name: 'article', query: { type: 0 } }"
            class="nav-link text-white font-weight-bold"
            >文章</router-link
          >
        </li>
        <li class="nav-item">
          <router-link
            :to="{ name: 'project', query: { type: 1 } }"
            class="nav-link text-white font-weight-bold"
            >项目</router-link
          >
        </li>
        <li class="nav-item">
          <a
            href="https://l-sama.gitee.io/"
            class="nav-link text-white font-weight-bold"
            ><i class="iconfont icon-wendang"></i></a
          >
        </li>
        <li class="nav-item">
          <a
            href="https://gitee.com/L-sama"
            class="nav-link text-white font-weight-bold"
            ><i class="iconfont icon-gitee-fill-round"></i></a
          >
        </li>
        <!-- <li class="nav-item">
          <router-link
            to="/feedback"
            class="nav-link text-white font-weight-bold"
            >反馈</router-link
          > -->
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: "HomeNav",
};
</script>

<style scoped>
nav {
  margin: auto;
  width: 80%;
}
</style>
